<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="mydiv"><h2>使用ajax修改文本内容</h2></div>
    <button onclick="loadXMLDoc()">修改内容</button>

    <script>
        function loadXMLDoc(){
            // 判断浏览器是否支持xmlhttprequest对象,new一个xmlhttprequest对象
            if(window.XMLHttpRequest){
                var a=new XMLHttpRequest();
            }else{
                // 如果当前浏览器不支持XMLHttpRequest，那么一定会支持ActiveXobject。因为所有浏览器都支持XMLHttpRequest，除了ie5.ie6，它们支持ActiveXobject
                var a=new ActiveXobject();
            }
            // 判断当前状态是否处于响应服务器处理的就绪状态
            // 当readystatechange值变化时，就会触发函数
            a.onreadystatechange=function(){
                // 当status==200且readystate==4时表示请求已成功发送给后台服务器，并且响应已就绪
                if(a.readyState==4 && a.status==4){
                    // 此时可以获取服务器的响应，即服务器返回过来的数据
                    document.getElementById('mydiv').innerHTML=a.responseText;
                    // 将后台返回的字符串数据赋值给id=mydiv的盒子的内部html
                }
            }
            // 发送请求的方式是post,异步，以及服务器端地址url
            a.open('POST',url,true);
            a.send();// send()函数发送请求
        }
    </script>
</body>
</html>